<template>
  <!-- 电催案件管理-个人案件池-页面 -->
  <section class="page tel-person-case-manage wit">
    <data-form :rules="rules" :model="model" @onSearch="refreshData" @handleResetForm="handleResetForm" :page="pageService">
      <template slot="inputs">
        <el-form-item label="账户号" prop="caseNumber">
          <el-input v-model="model.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="客户号" prop="personalNo">
          <el-input v-model="model.personalNo"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model="model.personalName" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="证件号" prop="idCard">
          <el-input v-model="model.idCard" :maxlength="18"></el-input>
        </el-form-item>
        <el-form-item label="账户总金额" prop="caseMoney">
          <number-range v-model="model.caseMoney"></number-range>
        </el-form-item>
        <el-form-item label="账户逾期总金额" prop="overdueAmount">
          <number-range v-model="model.overdueAmount"></number-range>
        </el-form-item>
        <el-form-item label="逾期期数" prop="overduePeriod">
          <number-range v-model="model.overduePeriod"></number-range>
        </el-form-item>
        <el-form-item label="逾期天数" prop="overdueDays">
          <number-range v-model="model.overdueDays"></number-range>
        </el-form-item>
        <el-form-item label="还款日" prop="payDate">
          <!-- <el-date-picker type="daterange" :editable="false" v-model="model.payDate" placeholder="选择日期时间" clearable /> -->
          <number-range v-model="model.payDate"></number-range>
          <!-- <el-input type="number" v-model="model.payDate"></el-input> -->
        </el-form-item>
        <el-form-item label="账单日" prop="billDate">
          <!-- <el-date-picker type="daterange" :editable="false" v-model="model.billDate" placeholder="选择日期时间" clearable /> -->
          <number-range v-model="model.billDate"></number-range>
          <!-- <el-input type="number" v-model="model.billDate"></el-input> -->
        </el-form-item>
        <el-form-item label="手机号" prop="mobileNo">
          <el-input v-model="model.mobileNo" :maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="产品编号" prop="productNo">
          <el-input v-model="model.productNo" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="队列代码" prop="queueCode">
          <el-input v-model="model.queueCode" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="入催原因码" prop="reasonCode">
          <el-select v-model="model.reasonCode" placeholder="请选择" clearable>
            <el-option v-for="{ index, name, code } in $dict.getDictData('ReasonCode')" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="默认锁定时间" prop="lockTime">
          <el-date-picker type="daterange" :editable="false" v-model="model.lockTime" placeholder="选择日期时间" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="指定锁定时间" prop="leaveDueDate">
          <el-date-picker type="daterange" :editable="false" v-model="model.leaveDueDate" placeholder="选择日期时间" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="AT" prop="at">
          <el-input v-model="model.at" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="CT" prop="ct">
          <el-input v-model="model.ct" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="最新跟进时间" prop="followupTime">
          <el-date-picker type="daterange" :editable="false" v-model="model.followupTime" placeholder="选择日期时间" clearable>
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="案件标记" prop="caseMark">
          <el-select v-model="model.caseMark" placeholder="请选择" clearable>
            <el-option v-for="{ index, name, code } in $dict.getDictData('CaseMark')" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="机构号" prop="companyCode">
          <el-input v-model.trim="model.companyCode" clearable :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="组别号" prop="deptNo">
          <el-input v-model.trim="model.deptNo" clearable :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="案件标色" prop="caseMark">
          <el-select v-model="model.caseMark" placeholder="请选择" clearable>
            <el-option v-for="{ index, name, code } in $dict.getDictData('CaseMark')" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手工标识" prop="handworkCode">
          <el-select v-model="model.handworkCode" placeholder="请选择" clearable>
            <el-option v-for="item in handworkCodeArr" :key="item.id" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <!-- 210603-新增经办代号 -->
        <el-form-item label="经办代号" prop="currentCollectorCode">
          <el-input v-model.trim="model.currentCollectorCode" clearable :maxlength="20"></el-input>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataSet" :selectionList.sync="selectionList" @onPageChange="queryPageInfo" :page="pageService" ref="data-box" showCaseMark>
      <template slot="caseTotalInfo">
        <case-total-info class="absolute" :caseInfoData="caseTotalData" />
      </template>
      <template slot="append">
        <case-marker @change-color="onColorChange" :selectionList="selectionList"></case-marker>
      </template>
      <template slot="columns">
        <el-table-column prop="caseNumber" label="账户号" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
          <template slot-scope="scope">
            <a @click="openExecutionPage(scope.row)">{{
              scope.row.caseNumber
            }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="personalNo" label="客户号" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="personalName" label="客户姓名" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="idCard" label="身份证号" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="mobileNo" label="手机号" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="caseMoney" label="账户总金额" :formatter="row => $filter.toThousands(row.caseMoney)" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip sortable>
        </el-table-column>
        <el-table-column prop="overdueAmount" label="账户逾期总金额" :formatter="row => $filter.toThousands(row.overdueAmount)" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip sortable>
        </el-table-column>
        <el-table-column prop="overduePeriod" label="逾期期数" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip sortable>
        </el-table-column>
        <el-table-column prop="overdueDays" label="逾期天数" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip sortable>
        </el-table-column>
        <!-- <el-table-column prop="payDate" label="还款日" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.dateFormat(row.payDate)" show-overflow-tooltip sortable>
        </el-table-column>
        <el-table-column prop="billDate" label="账单日" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.dateFormat(row.billDate)" show-overflow-tooltip sortable>
        </el-table-column> -->
        <el-table-column prop="payDate" label="还款日" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip sortable>
        </el-table-column>
        <el-table-column prop="billDate" label="账单日" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip sortable>
        </el-table-column>
        <el-table-column prop="productNo" label="产品编号" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="queueCode" label="队列代码" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="reasonCode" label="入催原因码" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.dictConvert(row.reasonCode, 'ReasonCode')" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="handworkCode" label="手工标识" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip />
        <!-- 待调试（暂无数据） -->
        <el-table-column prop="currentCollectorCode" label="经办代号" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>

        <el-table-column prop="lockTime" label="默认锁定时间" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.dateFormat(row.lockTime)" show-overflow-tooltip sortable>
        </el-table-column>
        <el-table-column prop="companyCode" label="机构号" :min-width="$helper.getColumnWidth(4)" />
        <el-table-column prop="deptNo" label="组别号" :min-width="$helper.getColumnWidth(4)" />
        <el-table-column prop="leaveDueDate" label="指定锁定时间" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.dateFormat(row.leaveDueDate)" show-overflow-tooltip sortable>
        </el-table-column>
        <!-- 字段待定 -->
        <!-- <el-table-column prop="currentCollectorRealName" label="案件标记" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column> -->
        <el-table-column prop="distributeTime" label="分案时间" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.dateFormat(row.distributeTime)" show-overflow-tooltip sortable>
        </el-table-column>
        <el-table-column prop="closingCode" label="结案码" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-if="!scope.row.objectiveCode"></div>
            <div v-else>
              {{
                `${$filter.dictConvert(
                  scope.row.channelCode,
                  "QueueCategory"
                )}${scope.row.objectiveCode || ""}${scope.row.modifierCode ||
                  ""}`
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="followupTime" label="最新跟进时间" :formatter="row => $filter.dateTimeFormat(row.followupTime)" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip sortable>
        </el-table-column>
      </template>
    </data-box>

    <!--申请弹框-->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :title="`${applyType.name}申请`" :visible.sync="dialog.apply" width="800px">
      <turn-source-apply :applyType="applyType.value" :caseIds="selectedCaseIds" :fromChannel="caseChannel" @close="
          dialog.apply = false;
          refreshData();
        " />
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies, Layout, Auth } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import NumberRange from "~/components/common/number-range.vue";
import { TelCaseManageService } from "~/services/domain-service/tel-case-manage.service";
import CaseMarker from "~/components/common/case-marker.vue";
import { ApplyType, CASE_CHANNEL, MENU_CHANNEL } from "~/config/enum.config";
import { Getter, Mutation, namespace, State } from "vuex-class";
import { CaseInfoService } from "~/services/domain-service/case-info.service";
import GetLabelName from "~/components/labeling-strategy/get-label-name.vue";
import TurnSourceApply from "~/components/apply-component/turn-source-apply.vue";
import SelectDepartment from "~/components/business-component/select-department.vue";
import CaseTotalInfo from "~/components/common/case-total-info.vue";
import { UserService } from "~/services/management-service/user.service";
import { Prop } from "vue-property-decorator";
import { LegalCaseManageService } from "~/services/domain-service/legal-case-manage.service";
const CollectionExecutionModule = namespace("collection-execution");

@Auth(202)
@Layout("workspace")
@Component({
  components: {
    NumberRange,
    CaseMarker,
    GetLabelName,
    TurnSourceApply,
    SelectDepartment,
    CaseTotalInfo
  }
})
export default class TelPersonCaseManage extends Vue {
  @Dependencies(UserService) private userService: UserService;
  @CollectionExecutionModule.Mutation private updatePersonalType;
  @Dependencies(LegalCaseManageService) private legallyCaseManageService: LegalCaseManageService;
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(TelCaseManageService)
  private telCaseManageService: TelCaseManageService;
  @Dependencies(CaseInfoService)
  private caseInfoService: CaseInfoService;
  @Mutation
  private updateCollectionType;
  @Getter
  private callDepartmentData;
  @State private principalList: any;
  @Prop() private queueType;

  private model: any = {
    handworkCode: '',
    caseNumber: "",
    personalName: "",
    mobileNo: "",
    idCard: "",
    overdueAmount: { max: "", min: "" },
    caseMoney: { max: "", min: "" },
    overduePeriod: { max: "", min: "" },
    overdueDays: { max: "", min: "" },
    payDate: { max: "", min: "" },
    billDate: { max: "", min: "" },
    lockTime: { max: "", min: "" },
    leaveDueDate: { max: "", min: "" },
    followupTime: { max: "", min: "" },
    reasonCode: "",
    caseMark: "",
    closingCode: "",
    personalNo: "",
    productNo: "",
    queueCode: "",
    at: "",
    ct: "",
  };
  private rules: any = {
    mobileNo: [{ validator: this.$validator.phoneNumber, trigger: "change" }],
    idCard: [{ validator: this.$validator.idcardUscc, trigger: "change" }]
  };
  private dataSet: any[] = [];
  private selectionList: any[] = [];
  private caseTotalData: any = {};
  private dialog: any = {
    apply: false
  };
  private handworkCodeArr: any = []
  private applyType = ApplyType.turn;
  private caseChannel = CASE_CHANNEL.tel;
  private userSet: any = [];

  private mounted() {
    this.refreshData();
    this.getObjectiveCode()
  }

  private getObjectiveCode() {
    this.userService.findAlreadyEffectCodeByType({ code: 'SG_CODE' }).subscribe(data => {
      this.handworkCodeArr = data
    });
  }

  /**
   * 查询翻页信息
   */
  private queryPageInfo() {
    // 法诉
    if (this.queueType === 'PERSON') {
      this.legallyCaseManageService
        .personalCasePool(this.paramsHandler(), this.pageService)
        .subscribe(data => {
          this.dataSet = data;
          this.selectionList = [];
        });
    } else {
      this.telCaseManageService
        .personalCasePool(this.paramsHandler(), this.pageService)
        .subscribe(data => {
          this.dataSet = data;
          this.selectionList = [];
        });
    }
  }

  private refreshData() {
    if (this.model.caseNumber && this.$validator.regex.isChineseComma.test(this.model.caseNumber)) return this.$message.error("请用英文逗号！");
    this.getCaseAmount();
    this.queryPageInfo();
  }

  private departemntChange(id, code) { }

  /**
   * 表单范围输入框重置
   */
  private handleResetForm() {
    this.model.overdueAmount = { min: "", max: "" };
    this.model.caseMoney = { min: "", max: "" };
    this.model.overduePeriod = { min: "", max: "" };
    this.model.overdueDays = { min: "", max: "" };
    this.model.payDate = { min: "", max: "" };
    this.model.billDate = { min: "", max: "" };
    this.model.lockTime = { min: "", max: "" };
    this.model.leaveDueDate = { min: "", max: "" };
    this.model.followupTime = { min: "", max: "" };
  }

  private paramsHandler() {
    const params = { ...this.model };
    params.overdueAmountMax = this.model.overdueAmount
      ? this.model.overdueAmount.max
      : "";
    params.overdueAmountMin = this.model.overdueAmount
      ? this.model.overdueAmount.min
      : "";
    params.caseMoneyMax = this.model.caseMoney ? this.model.caseMoney.max : "";
    params.caseMoneyMin = this.model.caseMoney ? this.model.caseMoney.min : "";
    params.overduePeriodMax = this.model.overduePeriod
      ? this.model.overduePeriod.max
      : "";
    params.overduePeriodMin = this.model.overduePeriod
      ? this.model.overduePeriod.min
      : "";
    params.overdueDaysMax = this.model.overdueDays
      ? this.model.overdueDays.max
      : "";
    params.overdueDaysMin = this.model.overdueDays
      ? this.model.overdueDays.min
      : "";
    // params.payDateMax = this.$filter.dateRanageFormat(this.model.payDate).end;
    // params.payDateMin = this.$filter.dateRanageFormat(this.model.payDate).start;
    // params.billDateMax = this.$filter.dateRanageFormat(this.model.billDate).end;
    // params.billDateMin = this.$filter.dateRanageFormat(this.model.billDate).start;
    params.payDateMax = this.model.payDate.max;
    params.payDateMin = this.model.payDate.min;
    params.billDateMax = this.model.billDate.max;
    params.billDateMin = this.model.billDate.min;
    params.lockTimeMax = this.$filter.dateRanageFormat(this.model.lockTime).end;
    params.lockTimeMin = this.$filter.dateRanageFormat(this.model.lockTime).start;
    params.leaveDueDateMax = this.$filter.dateRanageFormat(this.model.leaveDueDate).end;
    params.leaveDueDateMin = this.$filter.dateRanageFormat(this.model.leaveDueDate).start;
    params.followupTimeMax = this.$filter.dateRanageFormat(this.model.followupTime).end;
    params.followupTimeMin = this.$filter.dateRanageFormat(this.model.followupTime).start;

    delete params.overdueAmount;
    delete params.caseMoney;
    delete params.overduePeriod;
    delete params.overdueDays;
    delete params.payDate;
    delete params.lockTime;
    delete params.billDate;
    delete params.leaveDueDate;
    delete params.followupTime;
    return params;
  }

  /**
   * 进入查看执行页
   */
  private openExecutionPage(row) {
    this.updatePersonalType(row.personalType);
    // 法诉
    if (this.queueType === 'PERSON') {
      this.$router.openCaseDetail(row.id, {
        menuChannel: MENU_CHANNEL.Legal_personal,
        otherData: {
          data: this.model,
          page: this.pageService
        }
      });
    } else {
      this.$router.openCaseDetail(row.id, {
        menuChannel: MENU_CHANNEL.Tel_personal,
        otherData: {
          data: this.model,
          page: this.pageService
        }
      });
    }
  }

  /**
   * 申请流转
   */
  private advanceCirculation() {
    if (this.selectionList.length === 0) {
      this.$message.info("请选择要流转的案件");
      return;
    }
    this.dialog.apply = true;
  }

  private get selectedCaseIds() {
    return this.selectionList.map(v => v.id);
  }

  private onColorChange(val) {
    const colorModel: any = {
      caseIds: this.selectionList.map(v => v.id),
      caseMark: val
    };
    this.caseInfoService
      .caseInfoMarkColor(colorModel)
      .subscribe(this.refreshData);
  }
  /**
   * 统计结果查询
   */
  private getCaseAmount() {
    // 法诉
    if (this.queueType === 'PERSON') {
      this.legallyCaseManageService.personalCasePoolAmount(this.paramsHandler()).subscribe(data => {
        this.caseTotalData = data;
      });
    } else {
      this.telCaseManageService.personalCasePoolAmount(this.paramsHandler()).subscribe(data => {
        this.caseTotalData = data;
      });
    }
  }
}
</script>

<style lang="less">
.wit .el-form-item > label {
  width: 96px !important;
}
.absolute {
  position: absolute;
  top: -19px;
  width: 100%;
  z-index: -1;
}
</style>
